var formId = getIdUnique();
var mapElements = {};
jQuery(function() {
	//Init General Contact Form Pro
	init_contact_form_pro();
	
	//Active Show Hide Menu
	initActiveShowHideMenu();
	
	//Active drag&drop element
	initActiveDragDropElements();
	
	//Active Form Action
	initActiveActionForm();
	
	exampleRenderElements();
});

/** =============================================================================================================================================================================== 
 * Active drag&drop element
 * =============================================================================================================================================================================== */
initActiveDragDropElements = function () {
	//Draggable Elements
	jQuery( "#grid-system .nino-elementDragAble, #popular-elements .nino-elementDragAble, #other-elements .nino-elementDragAble" ).draggable({ 
		connectToSortable: "#nino-form-builder-area .nino-grid-col", 
		scroll: false,
		containment: "#nino-mainSettings",
		helper: "clone"
	});
	
	//Set sortable Grid System
	droppableElements();
};

//Enable droppable elements
droppableElements = function () {
	jQuery("#nino-form-builder-area .nino-grid-col")
	.droppable({
		drop: function (event, ui) {
			createFormElement(ui.draggable);
		},
		over: function (event, ui){
			//jQuery(ui.draggable).addClass("nino-showElement");
		},
		out: function (event, ui) {
			//jQuery(this.removeClass("nino-showElement"));
		},
		helper: "clone"
	})
	.sortable({
		placeholder: "ui-state-highlight",
		connectWith: "#nino-form-builder-area .nino-grid-col"
	}).disableSelection();
};

createFormElement = function (obj) {
	//Set id for element form
	if (!jQuery(obj).is('[id]')) {
		var id = getIdUnique();
		jQuery(obj).attr("id", id);
	}
	
	jQuery(obj).addClass("nino-showElement");
	
	//Reactive dropable
	droppableElements();
	
	//Calculator position elements
	calcMapOfElements();
	
	//Active event change element settings
	changeElementSettings();
};


/** =============================================================================================================================================================================== 
 * Caculator Map Of Elements
 * =============================================================================================================================================================================== */
calcMapOfElements = function () {
	mapElements = {};
	jQuery("#nino-form-builder-area > .nino-grid-col > .nino-showElement").each(function (index) {
		var id = jQuery(this).attr("id");
		mapElements[id] = getPositionChildrenElements(this);
	});
};

getPositionChildrenElements = function (obj) {
	var ninoType = jQuery(obj).attr("nino-type");
	var id = jQuery(obj).attr("id");
	
	//Set new object position
	var objElm = {};
	objElm['id'] = id;
	objElm['type'] = ninoType;
	
	if (ninoType.indexOf("-cols") != -1) {
		var colums = [];
		jQuery(obj).find("> div[class^='nino-grid-layout'] > .nino-grid-col").each(function (index) {
			var col = {};
			jQuery(this).find("> .nino-showElement").each(function (idx) {
				var cid = jQuery(this).attr("id");
				col[cid] = getPositionChildrenElements(this);
			});
			colums.push(col);
		});
		objElm['colums'] = colums;
	}
	
	return objElm;
};

/** =============================================================================================================================================================================== 
 * Render Map To Element Html
 * =============================================================================================================================================================================== */
renderMapToElements = function () {
	var ninoFormBuilderArea = jQuery("#nino-form-builder-area > .nino-grid-col");
	jQuery.each(mapElements, function (key, element) {
		renderElement(ninoFormBuilderArea, element);
	});
};

renderElement = function (parentElement, element) {
	if (element['type'].indexOf("-cols") != -1) {
		var obj = jQuery("#nino-addElements div[nino-type="+element['type']+"]").clone();
		obj.attr("id", element['id']).addClass("nino-showElement");
		
		jQuery.each(element['colums'], function (ind1, elm1) {
			var parElm = obj.find("> div[class^='nino-grid-layout'] > .nino-grid-col:eq("+ind1+")");
			jQuery.each(elm1, function (ind2, elm2) {
				renderElement(parElm, elm2);
			});
		});
		obj.appendTo(parentElement);
	} else {
		var obj = jQuery("#nino-addElements div[nino-type="+element['type']+"]").clone();
		obj.attr("id", element['id']).addClass("nino-showElement");
		obj.appendTo(parentElement);
	}
};

//Example Render
exampleRenderElements = function () {
	mapElements = {
		'popular-elements' : {
			'id' : 'popular-elements',
			'type' : '1-cols',
			'colums' : [
				{
					'text-id' : {
						'id' : 'text-id',
						'type' : 'text'
					},
					'text-id-2' : {
						'id' : 'text-id-2',
						'type' : 'text'
					},
					'select-id' : {
						'id' : 'select-id',
						'type' : 'select'
					},
					'select-id-2' : {
						'id' : 'select-id-2',
						'type' : 'select'
					},
					'text-area-id' : {
						'id' : 'textarea-id',
						'type' : 'textarea'
					},
					'text-area-id-2' : {
						'id' : 'textarea-id-2',
						'type' : 'textarea'
					},
					'checkbox-id' : {
						'id' : 'checkbox-id',
						'type' : 'checkbox'
					},
					'checkbox-id-2' : {
						'id' : 'checkbox-id-2',
						'type' : 'checkbox'
					},
					'radio-id' : {
						'id' : 'radio-id',
						'type' : 'radio'
					},
					'radio-id-2' : {
						'id' : 'radio-id-2',
						'type' : 'radio'
					},
					'captcha-id' : {
						'id' : 'captcha-id',
						'type' : 'captcha'
					},
					'captcha-id-2' : {
						'id' : 'captcha-id-2',
						'type' : 'captcha'
					},
					'submit-id' : {
						'id' : 'submit-id',
						'type' : 'submit'
					},
					'submit-id-2' : {
						'id' : 'submit-id-2',
						'type' : 'submit'
					}
				}
			]
		},
		'other-elements' : {
			'id' : 'other-elements',
			'type' : '1-cols',
			'colums' : [
				{
					'paragraph-id' : {
						'id' : 'paragraph-id',
						'type' : 'paragraph'
					},
					'map-id' : {
						'id' : 'map-id',
						'type' : 'map'
					},
					'social-link-id' : {
						'id' : 'social-link-id',
						'type' : 'social-link'
					},
					'social-link-id-2' : {
						'id' : 'social-link-id-2',
						'type' : 'social-link'
					},
					'image-id' : {
						'id' : 'image-id',
						'type' : 'image'
					},
					'h1-id' : {
						'id' : 'h1-id',
						'type' : 'h1'
					},
					'h2-id' : {
						'id' : 'h2-id',
						'type' : 'h2'
					},
					'h3-id' : {
						'id' : 'h3-id',
						'type' : 'h3'
					},
					'h4-id' : {
						'id' : 'h4-id',
						'type' : 'h4'
					},
					'h5-id' : {
						'id' : 'h5-id',
						'type' : 'h5'
					},
					'h6-id' : {
						'id' : 'h6-id',
						'type' : 'h6'
					}
				}
			]
		}
	};
	renderMapToElements();
};

/** =============================================================================================================================================================================== 
 * Active Show Hide Menu
 * =============================================================================================================================================================================== */
initActiveShowHideMenu = function () {
	//Open Panel Create Form
	jQuery(".nino-openForm").click(function () {
		openFormMenu();
		return false;
	});
	
	//Close Panel Create Form
	jQuery(".nino-createForm .nino-otherSettingsNav > span").click(function () {
		closeFormMenu();
		return false;
	});
	
	//
	jQuery(".nino-openSettings").click(function () {
		openSettingMenu();
		return false;
	});
	
	//
	jQuery(".nino-globalSettings .nino-otherSettingsNav > span").click(function () {
		closeSettingMenu();
		return false;
	});
	
	//
	jQuery(".nino-openElements").click(function () {
		openElementsMenu();
		return false;
	});
	
	//
	jQuery(".nino-addElements .nino-otherSettingsNav > span").click(function () {
		closeElementsMenu();
		return false;
	});
	
	//
	jQuery(".nino-openClipboard").click(function () {
		openClipboardMenu();
		return false;
	});
	
	//
	jQuery(".nino-clipboard .nino-otherSettingsNav > span").click(function () {
		closeClipboardMenu();
		return false;
	});
	
	//
	jQuery(".nino-addToSite").click(function () {
		openAddToSiteMenu();
		
		return false;
	});
	
	//
	jQuery(".nino-addFormToSite .nino-otherSettingsNav > span").click(function () {
		closeAddToSiteMenu();
		return false;
	});
};


//Open Menu Form
openFormMenu = function () {
	jQuery(".nino-otherSettings").addClass("nino-open");
	jQuery(".nino-otherSettings > div").addClass("nino-hidden");
	jQuery(".nino-createForm").removeClass("nino-hidden");
	openLeftSide();
};

//Close Menu Form
closeFormMenu = function () {
	jQuery(".nino-otherSettings").removeClass("nino-open");
	jQuery(".nino-createForm").addClass("nino-hidden");
	closeLeftSide();
};

//
openSettingMenu = function () {
	jQuery(".nino-otherSettings").addClass("nino-open");
	jQuery(".nino-otherSettings > div").addClass("nino-hidden");
	jQuery(".nino-globalSettings").removeClass("nino-hidden");
	openLeftSide();
};

//
closeSettingMenu = function () {
	jQuery(".nino-otherSettings").removeClass("nino-open");
	jQuery(".nino-globalSettings").addClass("nino-hidden");
	closeLeftSide();
};

//
openElementsMenu = function () {
	jQuery(".nino-otherSettings").addClass("nino-open");
	jQuery(".nino-otherSettings > div").addClass("nino-hidden");
	jQuery(".nino-addElements").removeClass("nino-hidden");
	openLeftSide();
};

//
closeElementsMenu = function () {
	jQuery(".nino-otherSettings").removeClass("nino-open");
	jQuery(".nino-addElements").addClass("nino-hidden");
	closeLeftSide();
};

//
openClipboardMenu = function () {
	jQuery(".nino-otherSettings").addClass("nino-open");
	jQuery(".nino-otherSettings > div").addClass("nino-hidden");
	jQuery(".nino-clipboard").removeClass("nino-hidden");
	openLeftSide();
};

//
closeClipboardMenu = function () {
	jQuery(".nino-otherSettings").removeClass("nino-open");
	jQuery(".nino-clipboard").addClass("nino-hidden");
	closeLeftSide();
};

//
openAddToSiteMenu = function () {
	jQuery(".nino-otherSettings").addClass("nino-open");
	jQuery(".nino-otherSettings > div").addClass("nino-hidden");
	jQuery(".nino-addFormToSite").removeClass("nino-hidden");
	openLeftSide();
};

//
closeAddToSiteMenu = function () {
	jQuery(".nino-otherSettings").removeClass("nino-open");
	jQuery(".nino-addFormToSite").addClass("nino-hidden");
	closeLeftSide();
};

//
openFieldSetting = function () {
	jQuery(".nino-fieldSettings").removeClass("nino-open");
	openLeftSide();
};

//
closeFieldSetting = function () {
	jQuery(".nino-fieldSettings").addClass("nino-open");
	closeLeftSide();
};



//Open Left Side
openLeftSide = function () {
	jQuery("#nino-mainSettings").removeClass("nino-fullFormPreview");
};

//Close Left Side
closeLeftSide = function () {
	if (jQuery(".nino-leftSide > .nino-open").length == 0) {
		jQuery("#nino-mainSettings").addClass("nino-fullFormPreview");
	}
};

/** =============================================================================================================================================================================== 
 * Init General Contact Form Pro
 * =============================================================================================================================================================================== */
initActiveActionForm = function () {
	//Active Save Form action
	jQuery(".nino-saveForm").unbind("click");
	jQuery(".nino-saveForm").click(function () {
		var formName = jQuery(".nino-formName").val();
		
		var data = {
			action: 'nino_save_form_builder',
			id: formId,
			formName: formName,
			contentMapJs: jQuery.toJSON(mapElements),
			contentSettingJs: jQuery.toJSON(valElementSettings),
			mapContent: mapElements,
			settingContent: valElementSettings
		};
		
		console.log(data);
		
		jQuery.ajax({
			url: nino_contact_pro_ajax_object.ajax_url,
			data: data,
			type: "POST",
			success: function (data) {
				//alert(data);
			}
		});
		
		return false;
	});
};


/** =============================================================================================================================================================================== 
 * Init General Contact Form Pro
 * =============================================================================================================================================================================== */
init_contact_form_pro = function () {
	
	// Set Height for admin area
	setHeightWindow();
	jQuery( window ).resize(function() {
		setHeightWindow();
	});
	
};

setHeightWindow = function () {
	var ninoFieldSettingsHeight = jQuery(window).height() - 130;
	jQuery('.nino-leftSide > .nino-fieldSettings').css('height', ninoFieldSettingsHeight);
	jQuery('.nino-otherSettingsContent').css('height', ninoFieldSettingsHeight - 2);

	var ninoTabContentHeight = (ninoFieldSettingsHeight - 120);
	jQuery('.nino-leftSide > .nino-fieldSettings .tab-content').css('height',ninoTabContentHeight);
    
    var ninoFieldSelectedHeight = (ninoTabContentHeight + 30);
    jQuery('.nino-fieldSelected').css('height',ninoFieldSelectedHeight);
};